<template>
    <div style="background-color: #FEF9EF;">
        <van-config-provider :theme-vars="themeVars">
            <van-nav-bar style="background-color: rgba(0, 0, 0, 0);" title="活动详情" left-text="返回" left-arrow
                @click-left="onClickLeft" />
            <div class="body">
                <h3 style="margin-top: 10px;">{{ dataStore.act.title }}</h3>
                <p style="color: grey; font-size: small; margin-bottom: 15px;">{{ dataStore.act.time }}</p>
                <hr color="#F2F2F2">
                <div style="margin: 20px auto">{{ dataStore.act.content }}</div>
                <div class="i" v-for="i in dataStore.act.content_img">
                    <img :src='i' alt="" v-if="i != ''" />
                </div>
            </div>
        </van-config-provider>

    </div>
</template>

<script setup>

import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { useDataStore } from '../stores/dataStore';
const onClickLeft = () => history.back();
const dataStore = useDataStore()
const { getActDetail } = dataStore

const route = useRoute()
const actId = route.query.id

onMounted(() => {
    getActDetail(actId)
})

// 主题色变量
const themeVars = reactive({
    navBarIconColor: '#C94B29',
    navBarTextColor: '#C94B29',
});
</script>

<style lang="less" scoped>
.body {
    min-height: 100vh;
    padding: 0 15px;
    box-sizing: border-box;
}

* {
    padding: 0;
    margin: 0;
}

img {
    width: 100%;
    height: 200px;
    display: block;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
    margin-top: 15px;

}
</style>